<template>
  <div id="supplies-info">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>对虾管理</el-breadcrumb-item>
      <el-breadcrumb-item>投入品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主要内容 -->
    <el-card>
      <el-row
        class="globalHeader"
        style="margin-bottom: 20px; padding-bottom: 45px"
      >
        <el-col :span="4">
          <i class="el-icon-folder"></i>
          <span>投入品管理</span>
        </el-col>
        <el-col style="width: 100px; float: right">
          <!-- 类型分类开始 -->
          <el-dropdown @command="changeType">
            <el-button size="medium">
              <span>{{ typeOn }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in typeContent"
                :key="index"
                :command="index"
                >{{ item }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 类型分类结束 -->
        </el-col>
        <el-col style="width: 100px; float: right">
          <el-button
            type="primary"
            @click="showAdd"
            size="medium"
            :disabled="!permissionVisable.traceability_inputs_add"
            >添加信息</el-button
          >
        </el-col>
      </el-row>
      <el-table :data="suppliesInfo" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" label-width="170px">
              <el-row style="margin-bottom: 0">
                <el-col :span="12">
                  <el-form-item label="投入品名称" class="down-label">
                    <span>{{ props.row.suppliesName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="投入品 ID" class="down-label">
                    <span>{{ props.row.id }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 0">
                <el-col :span="12">
                  <el-form-item label="生产日期" class="down-label">
                    <span>{{ props.row.productDate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="到期时间" class="down-label">
                    <span>{{ props.row.shelfDate }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 0">
                <el-col :span="12">
                  <el-form-item label="规格(mm)" class="down-label">
                    <span>{{ props.row.specification }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="投入品类型" class="down-label">
                    <span>{{ props.row.type }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="margin-bottom: 0">
                <el-col :span="12">
                  <el-form-item label="供应商名称" class="down-label">
                    <span>{{ props.row.supplierName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="供应商地址" class="down-label">
                    <span>{{ props.row.supplierAddr }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="联系人" class="down-label">
                    <span>{{ props.row.inspector }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="供应商电话" class="down-label">
                    <span>{{ props.row.supplierPhone }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="供应商生产许可证" class="down-label">
                <div class="downBox">
                  <img :src="props.row.supplierLicense" alt />
                  <span class="mask">
                    <span
                      class="mask-icon1"
                      @click="previewInfo(props.row.supplierLicense)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                  </span>
                </div>
              </el-form-item>
              <el-form-item label="投入品照片" class="down-label">
                <div class="downBox">
                  <img :src="props.row.suppliesPic" alt />
                  <span class="mask">
                    <span
                      class="mask-icon1"
                      @click="previewInfo(props.row.suppliesPic)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                  </span>
                </div>
              </el-form-item>
              <el-form-item label="产品成分" class="down-label">
                <div class="downBox">
                  <img :src="props.row.ingredient" alt />
                  <span class="mask">
                    <span
                      class="mask-icon1"
                      @click="previewInfo(props.row.ingredient)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                  </span>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index" width="140"></el-table-column>
        <el-table-column
          label="投入品名称"
          prop="suppliesName"
          width="207"
        ></el-table-column>
        <el-table-column
          label="投入品类型"
          prop="type"
          width="160"
        ></el-table-column>
        <el-table-column
          label="生产日期"
          prop="productDate"
          width="270"
        ></el-table-column>
        <el-table-column
          label="到期时间"
          prop="shelfDate"
          width="270"
        ></el-table-column>
        <el-table-column label="操作" width="143">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
              :disabled="!permissionVisable.traceability_inputs_update"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              :disabled="!permissionVisable.traceability_inputs_delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pagenum"
        :page-sizes="[4, 6, 8, 10]"
        :page-size="pageInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 添加信息弹窗 -->
    <el-dialog
      title="添加投入品来源信息"
      @close="addDialogClosed"
      :visible.sync="isShowAdd"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-form
        :model="addForm"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="addForm"
        label-width="100px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="投入品名称" prop="suppliesName">
              <el-input
                placeholder="请输入投入品名称"
                v-model="addForm.suppliesName"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="生产日期" prop="productDate">
              <el-date-picker
                v-model="addForm.productDate"
                type="datetime"
                placeholder="选择生产日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="到期时间" prop="shelfDate">
              <el-date-picker
                v-model="addForm.shelfDate"
                type="datetime"
                placeholder="选择到期时间时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="规格(mm)" prop="specification">
              <el-input
                placeholder="请输入投入品规格"
                v-model="addForm.specification"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="投入品类型">
              <el-cascader
                placeholder="请选择投入品类型"
                v-model="valueType"
                :options="categoryOptions"
                @change="handleCategoryChange"
                clearable
                :show-all-levels="false"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="供应商" prop="supplierName">
              <el-input
                placeholder="请输入供应商名称"
                v-model="addForm.supplierName"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="联系人" prop="inspector">
              <el-input
                placeholder="请输入联系人名称"
                v-model="addForm.inspector"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="供应商电话" prop="supplierPhone">
              <el-input
                placeholder="请输入供应商电话"
                v-model="addForm.supplierPhone"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="供应商地址" prop="supplierAddr">
              <el-input
                placeholder="请输入供应商地址"
                v-model="addForm.supplierAddr"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">供应商生产许可证</el-col>
          <el-col :span="5">
            <div class="avatarBox">
              <!-- 回显  -->
              <!-- !!()=>转布尔值 -->
              <div v-show="!!addForm.supplierLicense" class="avatar">
                <img :src="addForm.supplierLicense" />
                <span class="mask">
                  <!-- 放大图片 -->
                  <span class="mask-icon1" @click="preview(0)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <!-- 删除图片 -->
                  <span
                    class="mask-icon2"
                    @click="deleteImg(0, addForm.supplierLicense)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <el-upload
                class="avatar-uploader"
                action="http://106.75.154.40:9011/suppliesinfo/addPic"
                :show-file-list="false"
                :on-success="addSuccess"
                :before-upload="beforeAdd"
                v-show="!addForm.supplierLicense"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">投入品照片</el-col>
          <el-col :span="5">
            <div class="avatarBox">
              <div v-show="!!addForm.suppliesPic" class="avatar">
                <img :src="addForm.suppliesPic" />
                <span class="mask">
                  <span class="mask-icon1" @click="preview(1)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="mask-icon2"
                    @click="deleteImg(1, addForm.suppliesPic)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <el-upload
                class="avatar-uploader"
                action="http://106.75.154.40:9011/suppliesinfo/addPic"
                :show-file-list="false"
                :on-success="addSuccess1"
                :before-upload="beforeAdd"
                v-show="!addForm.suppliesPic"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">产品成分</el-col>
          <el-col :span="5">
            <div class="avatarBox">
              <div v-show="!!addForm.ingredient" class="avatar">
                <img :src="addForm.ingredient" />
                <span class="mask">
                  <span class="mask-icon1" @click="preview(2)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="mask-icon2"
                    @click="deleteImg(2, addForm.ingredient)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <el-upload
                class="avatar-uploader"
                action="http://106.75.154.40:9011/suppliesinfo/addPic"
                :show-file-list="false"
                :on-success="addSuccess2"
                :before-upload="beforeAdd"
                v-show="!addForm.ingredient"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-button @click="addSuppliesInfo">确定</el-button>
      <el-button @click="cancelAdd">取消</el-button>
    </el-dialog>
    <!-- 编辑信息对话框 -->
    <el-dialog
      title="修改投入品信息"
      @close="editDialogClosed"
      :visible.sync="isShowEdit"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-form
        :model="editForm"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="editForm"
        label-width="100px"
        label-position="left"
      >
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="投入品名称" prop="suppliesName">
              <el-input
                placeholder="请输入投入品名称"
                v-model="editForm.suppliesName"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="生产日期" prop="productDate">
              <el-date-picker
                v-model="editForm.productDate"
                type="datetime"
                placeholder="选择生产日期时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="到期时间" prop="shelfDate">
              <el-date-picker
                v-model="editForm.shelfDate"
                type="datetime"
                placeholder="选择到期时间时间"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="规格(mm)" prop="specification">
              <el-input
                placeholder="请输入投入品规格"
                v-model="editForm.specification"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="投入品类型">
              <el-cascader
                placeholder="请选择投入品类型"
                v-model="valueType"
                :options="categoryOptions"
                @change="handleCategoryChange"
                clearable
                :show-all-levels="false"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="供应商" prop="supplierName">
              <el-input
                placeholder="请输入供应商名称"
                v-model="editForm.supplierName"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="联系人" prop="inspector">
              <el-input
                placeholder="请输入联系人名称"
                v-model="editForm.inspector"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <el-form-item label="供应商电话" prop="supplierPhone">
              <el-input
                placeholder="请输入供应商电话"
                v-model="editForm.supplierPhone"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="供应商地址" prop="supplierAddr">
              <el-input
                placeholder="请输入供应商地址"
                v-model="editForm.supplierAddr"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">供应商生产许可证</el-col>
          <el-col :span="5">
            <div class="avatarBox">
              <div v-show="!!editForm.supplierLicense" class="avatar">
                <img :src="editForm.supplierLicense" />
                <span class="mask">
                  <span class="mask-icon1" @click="preview(3)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="mask-icon2"
                    @click="deleteImg(3, editForm.supplierLicense)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <el-upload
                class="avatar-uploader"
                action="http://106.75.154.40:9011/suppliesinfo/addPic"
                :show-file-list="false"
                :on-success="addSuccess3"
                :before-upload="beforeAdd"
                v-show="!editForm.supplierLicense"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">投入品照片</el-col>
          <el-col :span="5">
            <div class="avatarBox">
              <div v-show="!!editForm.suppliesPic" class="avatar">
                <img :src="editForm.suppliesPic" />
                <span class="mask">
                  <span class="mask-icon1" @click="preview(4)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="mask-icon2"
                    @click="deleteImg(4, editForm.suppliesPic)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <el-upload
                class="avatar-uploader"
                action="http://106.75.154.40:9011/suppliesinfo/addPic"
                :show-file-list="false"
                :on-success="addSuccess4"
                :before-upload="beforeAdd"
                v-show="!editForm.suppliesPic"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">产品成分</el-col>
          <el-col :span="5">
            <div class="avatarBox">
              <div v-show="!!editForm.ingredient" class="avatar">
                <img :src="editForm.ingredient" />
                <span class="mask">
                  <span class="mask-icon1" @click="preview(5)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="mask-icon2"
                    @click="deleteImg(5, editForm.ingredient)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <el-upload
                class="avatar-uploader"
                action="http://106.75.154.40:9011/suppliesinfo/addPic"
                :show-file-list="false"
                :on-success="addSuccess5"
                :before-upload="beforeAdd"
                v-show="!editForm.ingredient"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        @click="editSuppliesInfo"
        :disabled="typeof valueType === 'string' ? true : false"
        >确定</el-button
      >
      <el-button @click="cancelEdit">取消</el-button>
    </el-dialog>
    <!-- 放大图片 -->
    <el-dialog :visible.sync="isPreview">
      <img :src="previewImg" alt class="previewImg" />
    </el-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import { mapState } from 'vuex'

export default {
  name: 'Suppliesinfo',
  data() {
    return {
      // 类型
      typeContent: ['全部'],
      typeOn: '全部',
      // 分页
      pageInfo: {
        pagenum: 1,
        pagesize: 4,
      },
      // 是否放大
      isPreview: false,
      // 放大图片路径
      previewImg: '',
      // 基地id
      baseId: this.$store.state.baseId,
      // 投入品来源信息
      suppliesInfo: [],
      // 总条数
      total: 0,
      // 是否显示添加弹窗
      isShowAdd: false,
      // 是否显示编辑弹窗
      isShowEdit: false,
      // 分类信息
      valueType: [],
      categoryOptions: [],
      // 添加信息表单
      addForm: {
        // 投入品名称
        suppliesName: '',
        // 生产日期
        productDate: '',
        // 到期时间
        shelfDate: '',
        // 联系人
        inspector: '',
        // 供应商名称
        supplierName: '',
        // 供应商地址
        supplierAddr: '',
        // 供应商电话
        supplierPhone: '',
        // 供应商生产许可证
        supplierLicense: '',
        // 投入品照片
        suppliesPic: '',
        // 产品成分
        ingredient: '',
        // 产品规格
        specification: '',
        // 分类
        type: '',
      },
      // 修改信息弹窗
      editForm: {
        // 投入品名称
        suppliesName: '',
        // 生产日期
        productDate: '',
        // 到期时间
        shelfDate: '',
        // 联系人
        inspector: '',
        // 供应商名称
        supplierName: '',
        // 供应商地址
        supplierAddr: '',
        // 供应商电话
        supplierPhone: '',
        // 供应商生产许可证
        supplierLicense: '',
        // 投入品照片
        suppliesPic: '',
        // 产品成分
        ingredient: '',
        // 产品规格
        specification: '',
        // 分类
        type: '',
      },
      // 修改id
      suppliesinfoId: '',
      // 检验规则
      rules: {
        suppliesName: [
          { required: true, message: '请输入投入品名称', trigger: 'blur' },
        ],
        productDate: [
          { required: true, message: '请输入生产日期', trigger: 'blur' },
        ],
        shelfDate: [
          { required: true, message: '请输入到期时间', trigger: 'blur' },
        ],
        supplierName: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' },
        ],
        inspector: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' },
        ],
        supplierPhone: [
          { required: true, message: '请输入供应商电话', trigger: 'blur' },
          {
            min: 8,
            max: 11,
            message: '长度在 8 到 11 个字符',
            trigger: 'blur',
          },
        ],
        supplierAddr: [
          { required: true, message: '请输入供应商地址', trigger: 'blur' },
        ],
        specification: [
          { required: true, message: '请输入规格', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    handleCategoryChange(value) {
      console.log(this.valueType)
      this.addForm.type = value[value.length - 1]
      this.editForm.type = value[value.length - 1]
      console.log(this.addForm)
    },
    // 获取类型
    async getCategoryOne() {
      const { data: res } = await this.$http.post('/inputcategory/search', {
        baseId: this.baseId,
      })
      // 存储数组
      let categorySet = res.data
      // 遍历循环数组，加入一级大类
      categorySet.forEach((item) => {
        let categoryObj = {}
        let children = []
        categoryObj.value = item.typeOne
        categoryObj.label = item.typeOne
        categoryObj.id = item.id
        categoryObj.children = children
        this.categoryOptions.push(categoryObj)
      })
      console.log(this.categoryOptions)
      this.categoryOptions.forEach((item) => {
        this.getCategoryTwo(item)
      })
      console.log(this.categoryOptions)
    },
    // 获取二级分类信息
    async getCategoryTwo(itemOne) {
      const { data: res } = await this.$http.post(
        `/inputcategoryinter/search`,
        {
          firstLevelId: itemOne.id,
        }
      )
      res.data.forEach((item) => {
        let typeTwoObj = {}
        typeTwoObj.value = item.typeTwo
        typeTwoObj.label = item.typeTwo
        itemOne.children.push(typeTwoObj)
        this.typeContent.push(item.typeTwo)
      })
    },
    // 确认修改信息
    editSuppliesInfo() {
      // 进行表单验证
      this.$refs.editForm.validate(async (valid) => {
        if (!valid) return false
        // 生产日期转化
        var prodate = new Date(this.editForm.productDate)
        this.editForm.productDate = `${prodate.getFullYear()}-${
          prodate.getMonth() + 1
        }-${prodate.getDate()} ${prodate.getHours()}:${prodate.getMinutes()}:${prodate.getSeconds()}`
        // 到期时间转化
        var shelfdate = new Date(this.editForm.shelfDate)
        this.editForm.shelfDate = `${shelfdate.getFullYear()}-${
          shelfdate.getMonth() + 1
        }-${shelfdate.getDate()} ${shelfdate.getHours()}:${shelfdate.getMinutes()}:${shelfdate.getSeconds()}`
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        const { data: res } = await this.$http.put(
          `/suppliesinfo/${this.suppliesinfoId}`,
          this.editForm
        )
        if (res.code !== 20000) {
          loading.close()
          return this.$message.error('修改投入品信息失败！！')
        }
        loading.close()
        this.$message.success('修改投入品信息成功！！')
        this.getSuppliesInfo()
        this.isShowEdit = false
      })
    },
    // 修改投入品信息
    handleEdit(row) {
      console.log(row)
      this.isShowEdit = true
      this.editForm.suppliesName = row.suppliesName
      this.editForm.productDate = row.productDate
      this.editForm.shelfDate = row.shelfDate
      this.editForm.inspector = row.inspector
      this.editForm.specification = row.specification
      this.editForm.supplierName = row.supplierName
      this.editForm.supplierAddr = row.supplierAddr
      this.editForm.supplierPhone = row.supplierPhone
      this.editForm.supplierLicense = row.supplierLicense
      this.editForm.suppliesPic = row.suppliesPic
      this.editForm.type = row.type
      this.valueType = row.type
      this.editForm.baseId = this.baseId
      this.editForm.ingredient = row.ingredient
      this.suppliesinfoId = row.id
      console.log(typeof this.valueType)
    },
    // 删除投入品信息
    async handleDelete(row) {
      // console.log(row)
      // 前提：在elementUI中挂载confirm
      // （提示消息，标题文本，｛确认按钮的文本，取消按钮的文本，提示的类型｝）
      const confirmResult = await this.$confirm(
        '此操作将永久删除该投入品信息, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
        // .catch 用于捕获错误返回给confirmResult
      ).catch((err) => {
        return err
      })
      // 如果确认删除，则返回值为字符串 confirm
      // 如果取消了删除， 则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        // this.$message.info: 灰色提示框
        return this.$message.info('已取消删除')
      }
      const { data: res } = await this.$http.delete(`suppliesinfo/${row.id}`)
      if (res.code !== 20000) return this.$message.error('删除失败！！')
      this.$message.success('删除成功！！')
      this.deleteImg(0, row.supplierLicense)
      this.deleteImg(1, row.suppliesPic)
      this.deleteImg(2, row.ingredient)
      this.getSuppliesInfo()
    },
    // 查看资料放大图片
    previewInfo(src) {
      this.isPreview = true
      this.previewImg = src
    },
    // 放大图片
    preview(num) {
      this.isPreview = true
      switch (num) {
        case 0:
          this.previewImg = this.addForm.supplierLicense
          break
        case 1:
          this.previewImg = this.addForm.suppliesPic
          break
        case 2:
          this.previewImg = this.addForm.ingredient
          break
        case 3:
          this.previewImg = this.editForm.supplierLicense
          break
        case 4:
          this.previewImg = this.editForm.suppliesPic
          break
        case 5:
          this.previewImg = this.editForm.ingredient
          break
      }
    },
    // 修改当前页数
    handleSizeChange(newSize) {
      this.pageInfo.pagesize = newSize
      this.getSuppliesInfo()
    },
    // 修改当前条数/页
    handleCurrentChange(newPage) {
      this.pageInfo.pagenum = newPage
      this.getSuppliesInfo()
    },
    // 删除图片
    deleteImg(num, url) {
      if (num === 0) {
        this.addForm.supplierLicense = ''
      } else if (num === 1) {
        this.addForm.suppliesPic = ''
      } else if (num === 2) {
        this.addForm.ingredient = ''
      } else if (num === 3) {
        this.editForm.supplierLicense = ''
      } else if (num === 4) {
        this.editForm.suppliesPic = ''
      } else if (num === 5) {
        this.editForm.ingredient = ''
      }
      $.ajax({
        url: 'http://106.75.154.40:9011/suppliesinfo/delPic',
        type: 'POST',
        data: {
          _method: 'DELETE',
          delUrl: url,
        },
        success: function (data) {
          console.log(data)
        },
      })
      this.$message.success('图片删除成功！！')
    },
    // 许可证图片上传成功函数
    addSuccess(res, file) {
      this.addForm.supplierLicense = res.data
      this.$message.success('图片上传成功！！')
    },
    // 投入品图片上传成功函数
    addSuccess1(res, file) {
      this.addForm.suppliesPic = res.data
      this.$message.success('图片上传成功！！')
    },
    // 产品成分上传成功
    addSuccess2(res, file) {
      this.addForm.ingredient = res.data
      this.$message.success('图书上传成功！！')
    },
    // 许可证图片修改成功函数
    addSuccess3(res, file) {
      this.editForm.supplierLicense = res.data
      this.$message.success('图片修改成功！！')
    },
    // 投入品图片修改成功函数
    addSuccess4(res, file) {
      this.editForm.suppliesPic = res.data
      this.$message.success('图片修改成功！！')
    },
    // 产品成分修改成功函数
    addSuccess5(res, file) {
      this.editForm.ingredient = res.data
      this.$message.success('图片修改成功！！')
    },
    // 图片上传前判断
    beforeAdd(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    // 获取投入品来源信息
    async getSuppliesInfo() {
      const { data: res } = await this.$http.post(
        `/suppliesinfo/search/${this.pageInfo.pagenum}/${this.pageInfo.pagesize}`,
        {
          baseId: this.baseId,
        }
      )
      if (res.code !== 20000) return this.$message.error('获取信息失败！！')
      console.log(res)
      this.total = res.data.total
      this.suppliesInfo = res.data.rows
    },
    // 根据分类获取投入品来源信息
    async changeType(command) {
      // 如果选择 0，则是全部
      this.pageInfo.pagenum = 1
      this.pageInfo.pagesize = 4
      if (command === 0) {
        this.typeOn = '全部'
        this.getSuppliesInfo()
      } else {
        // 如果选择 1，则是饲料
        this.getSuppliesInfoByCon(this.typeContent[command])
        this.typeOn = this.typeContent[command]
      }
    },
    // 根据分类获取信息
    async getSuppliesInfoByCon(data) {
      const { data: res } = await this.$http.post(
        `/suppliesinfo/search/${this.pageInfo.pagenum}/${this.pageInfo.pagesize}`,
        {
          baseId: this.baseId,
          type: data,
        }
      )
      if (res.code !== 20000) return this.$message.error('获取信息失败！！')
      this.total = res.data.total
      this.suppliesInfo = res.data.rows
    },
    // 显示添加信息弹窗
    showAdd() {
      this.isShowAdd = true
    },
    // 隐藏添加信息弹窗
    cancelAdd() {
      this.isShowAdd = false
    },
    // 取消修改信息
    cancelEdit() {
      this.isShowEdit = false
    },
    // 添加投入品产品信息
    addSuppliesInfo() {
      this.$refs.addForm.validate(async (valid) => {
        if (!valid) return false
        // 生产日期转化
        var prodate = new Date(this.addForm.productDate)
        this.addForm.productDate = `${prodate.getFullYear()}-${
          prodate.getMonth() + 1
        }-${prodate.getDate()} ${prodate.getHours()}:${prodate.getMinutes()}:${prodate.getSeconds()}`
        // 到期时间转化
        var shelfdate = new Date(this.addForm.shelfDate)
        this.addForm.shelfDate = `${shelfdate.getFullYear()}-${
          shelfdate.getMonth() + 1
        }-${shelfdate.getDate()} ${shelfdate.getHours()}:${shelfdate.getMinutes()}:${shelfdate.getSeconds()}`
        this.addForm.baseId = this.baseId
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        console.log(this.addForm)
        const { data: res } = await this.$http.post(
          '/suppliesinfo',
          this.addForm
        )
        if (res.code !== 20000) {
          loading.close()
          return this.$message.error('添加产品信息失败！！')
        }
        loading.close()
        this.$message.success('添加产品信息成功！！')
        // 刷新列表
        this.getSuppliesInfo()
        this.isShowAdd = false
      })
    },
    // 监听添加弹窗关闭事件
    addDialogClosed() {
      // 表单方法：resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.addForm.resetFields()
      this.addForm.supplierLicense = ''
      this.addForm.suppliesPic = ''
      this.addForm.ingredient = ''
      this.valueType = []
    },
    // 监听添加弹窗关闭事件
    editDialogClosed() {
      // 表单方法：resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.editForm.resetFields()
      this.editForm.supplierLicense = ''
      this.editForm.suppliesPic = ''
      this.editForm.ingredient = ''
      this.suppliesinfoId = ''
      this.valueType = []
    },
  },
  mounted() {
    this.getSuppliesInfo()
    this.getCategoryOne()
  },
  computed: {
    ...mapState(['permissionVisable']),
  },
}
</script>

<style lang="less">
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatarBox {
  position: relative;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
  }
  .mask-icon1,
  .mask-icon2 {
    display: none;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
  }
}
.avatar:hover .mask {
  position: absolute;
  width: 178px;
  height: 178px;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
  border-radius: 6px;
}
.avatar:hover .mask-icon1 {
  display: block;
  position: absolute;
  top: 62px;
  left: 45px;
}
.avatar:hover .mask-icon2 {
  display: block;
  position: absolute;
  top: 62px;
  left: 95px;
}
.mask-icon1:hover,
.mask-icon2:hover {
  color: rgb(165, 163, 163);
}
</style>
